<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: aqua;
        /* 通过定位实现窗口的移动 */
        position: absolute;
        /* absolute 相对于body偏移 */
        top: 100px;
        left: 200px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <h1>对话框</h1>
    </div>
  </body>
  <script>
    /* 创建一个div块，用鼠标事件实现拖拽功能。需求：
        1）当鼠标放在div块上时，按下鼠标左键并移动鼠标，div块随之运动；
        2）当松开鼠标左键，div块停止运动
    */
    var box = document.getElementsByClassName("box")[0];
    // 添加按下鼠标事件
    box.addEventListener("mousedown", fn1);

    function fn1(e1) {
      // 兼容处理
      var e1 = e1 || window.event;

      // 获取鼠标点击位置距离box边框的距离
      var distanceX = e1.clientX - box.offsetLeft;
      var distanceY = e1.clientY - box.offsetTop;

      // 在按下鼠标事件中添加鼠标移动事件
      document.addEventListener("mousemove", fn2);
      function fn2(e2) {
        // 兼容处理
        var e2 = e2 || window.event;

        // 计算出鼠标移动时box需要移动的距离
        var left = e2.clientX - distanceX;
        var top = e2.clientY - distanceY;

        // 解决移动越界问题
        // 获取可视区宽高
        var wW = window.innerWidth;
        var wH = window.innerHeight;
        // 判断是否越界，进行越界处理
        if (left < 0) left = 0;
        if (top < 0) top = 0;
        if (left > wW - box.offsetWidth) left = wW - box.offsetWidth;
        if (top > wH - box.offsetHeight) top = wH - box.offsetHeight;

        //移动box
        box.style.left = left + "px";
        box.style.top = top + "px";

        // 添加松下鼠标事件
        document.addEventListener("mouseup", fn3);
        function fn3() {
          // 当松下鼠标按键时，移除鼠标移动事件
          document.removeEventListener("mousemove", fn2);
        }
      }
    }
  </script>
</html>
